<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录入自定义页面</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

<!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">



    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
    </style>

    <style type="text/css">
        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/
    </style>
</head>
<body>

<div id="app">


    <div class="demoTable" style="padding: 5px;">
        <div class="layui-inline" v-for="(item,index) in listSearch" style="margin: 3px 0px;">
            <label class="layui-form-label" >{{item.lable}}：</label>

            <div class="layui-input-inline" v-if="item.type == '0'" >
                <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.startShow" >
                <input class="layui-input"   t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.endShow" >
                <input class="layui-input"  t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.startShow" >
                <input class="layui-input"  t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
            </div>
            <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.endShow" >
                <input class="layui-input"   t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions == 0"  >
                <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
            </div>
            <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions == 0"  >
                <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions != 0"  >
                <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input" style="display: block;width: 160px;" >
                    <option></option>
                    <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                </select>
            </div>

            <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions != 0" >
                <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input"  style="display: block;width: 160px;" >
                    <option></option>
                    <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                </select>
            </div>

        </div>

        <template v-if="JSON.stringify(listSearch) != '{}'">
            <button class="layui-btn"  onclick="vm.getListdata()">搜索</button>
            <button class="layui-btn"  onclick="vm.f_search_advanced()">高级检索</button>
            <button class="layui-btn"  onclick="vm.f_search_custom()">自定义搜索</button>
        </template>


    </div>



    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="ldmc"
                label="大楼名称"
                width="100">
        </el-table-column>
        <el-table-column
                prop="fjbh"
                label="房间号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="name"
                width="100"
                label="业主姓名">
        </el-table-column>
        <el-table-column
                prop="rzrq"
                width="100"
                label="入住时间">
        </el-table-column>

        <el-table-column
                prop="name"
                label="家庭成员">

            <template slot-scope="scope" >
                <el-table
                        :data="scope.row.listcy"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="xm"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="xb"
                            label="性别"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="csrq"
                            width="200"
                            label="出生日期">
                    </el-table-column>
                    <el-table-column
                            prop="gj"
                            label="国籍">
                    </el-table-column>

                    <el-table-column
                            prop="mz"
                            label="民族">
                    </el-table-column>

                    <el-table-column
                            prop="sfzh"
                            label="身份证号" width="200">
                    </el-table-column>
                    <el-table-column
                            prop="zzzh"
                            width="200"
                            label="暂住证号">
                    </el-table-column>
                    <el-table-column
                            prop="jszbh"
                            width="200"
                            label="计生证号">
                    </el-table-column>
                    <el-table-column
                            prop="crzh"
                            width="200"
                            label="出入证号">
                    </el-table-column>
                </el-table>
            </template>

        </el-table-column>


    </el-table>

    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total">
    </el-pagination>



</div>

<script>




    var vm = new Vue({
        el: '#app',
        data: {
            tableId:getTableId("658"),
            listSearch: {}//默认查询的字段
            , searchInputDtos: {},
            parmsData:{},
            tableData:[],
            total:0,
            pageNumber:1,
            iscz:"0"//是否查询出租
        },
        async created(){
            let mapda = getParams();
            this.parmsData = mapda;
            this.iscz = this.parmsData.iscz;
            this.getData();
        },
        methods:{
            //开始翻页
            handleCurrentChange(val){
                console.log(val);
                this.pageNumber = val;
            },
            async getData(){
                const res = await postBody("/admin/api/DataManagementController/getCustomFields",{tableId: getTableId("658"),mapdata:top.data.treeNodeObj})
                vm.listSearch = res.data.listSearch;
                vm.searchInputDtos = res.data.listSearch;
                this.loadDateInput();
                this.getListdata();
            },
            async getListdata(){
              const res = await postWebCustom("sichuangwuye-662",{iscz:this.iscz,pageNumber:""+this.pageNumber,searchInputDtos:JSON.stringify(vm.searchInputDtos)});
              this.tableData = res.data.rows;
              this.total = res.data.total;
            },
            f_search_advanced() {
                let btn = {
                    btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.getData();
                        this.searchInputDtos = data;
                        this.getListdata();
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.zygl_id = vm.tableId;
                top.f_layer_open_get("/admin/html/dataManagement/advancedRetrieval.html", "40%", "60%", function () {

                }, btn, "高级检索")
            },
            f_search_custom() {
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.custom = "IS_SEARCH";
                top.data.zygl_id = vm.tableId;
                top.f_layer_open_get("/admin/html/dataManagement/custom_search.html", "80%", "65%", function () {

                }, btn, "自定义搜索")
            },
            loadDateInput(){
                layui.use(['table', 'jquery', 'laydate'],function (){
                    var laydate = layui.laydate;
                    //初始化日期框
                    vm.$nextTick(function () {
                        $("[t=date]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            //日期常规用法
                            laydate.render({
                                elem: '#' + id,
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto[dt] = value;//设置vue数据对象的值
                                }
                            });
                        });

                        $("[t=datetime]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            laydate.render({
                                elem: '#' + id,
                                type: 'datetime',
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto["end"] = value;//设置vue数据对象的值
                                }
                            });
                        });
                    })
                });

            }
        },

    })


</script>


</body>
</html>
